<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>BitSat Home</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/index-mobile.css?v=1" media="all" />
    <link rel="stylesheet" href="./css/index-pc.css?v=2" media="all" />
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="header-content">
                <span class="left-menu" @click="showMenu=!showMenu"></span>
                <span class="logo"></span>
                <span class="right-btn" style="display: none;">Coming Soon</span>
            </div>
        </div>
        <div class="menu" :style="showMenu?'left:0;':'left:-1005px;'">
            <a href="/">Home</a>
            <a href="/" class="gray">Coming Soon</a>
            <a href="/" style="display: none;">Whitepaper</a>
        </div>
        <div class="box1">
            <div class="box-content">
                <div class="box1-con">
                    <div class="box1-1">
                        <div class="txt1">Flexible Control Ordinals Assets</div>
                        <div class="txt2">The Bridge of Bitcoin Layer1 to Layer2</div>
                        <div class="txt3">
                            Store and transfer your Ordinals Assets on Satroll<br />
                            Faster confirmation of transfer on Chain<br />
                            Low network fee<br />
                            More financialized market<br />
                            Support for developers to use API
                        </div>
                        <div class="btn-1">Coming Soon</div>
                    </div>
                    <div class="box1-2"></div>
                </div>
            </div>
        </div>
        <div class="box2">
            <div class="box-content">
                <div class="box1-con">
                    <div class="box1-1">
                        <div class="txt1">Satroll: A Scalable <br /> Network for Ordinals</div>
                        <div class="txt2">Satroll v1 launched in August 2023</div>
                        <div class="txt3">
                            Satroll is a scalable network designed for Ordinals.<br />
                            Satroll v1 will implement layer connector and layer2. <br />
                            Users can enable more flexible asset management by mapping assets on Layer1 to Layer2.
                            Satroll v1 will help enhance asset liquidity and enable more financialized trading models in
                            the market.<br />
                        </div>
                        <div class="btn-1" style="display: none;">Whitepaper</div>
                    </div>
                    <div class="box1-2"></div>
                </div>
            </div>
        </div>
        <div class="box3">
            <div class="box-content">
                <div class="box3-con">
                    <div class="box3-1">
                        <div class="txt1">Feature</div>
                        <div class="txt2">
                            What advantages do we all have
                        </div>
                        <div class="txt3">
                            <span :style="'left:'+(currBox*50)+'px'"></span>
                        </div>
                    </div>
                    <div class="box3-2">
                        <div class="box box1" @mouseover="currBox=0" :class="currBox==0?'curr':''">
                            <div class="box-icon"></div>
                            <div class="box-txt1">Low Network Fee</div>
                            <div class="box-txt2">Tenmendously lower the network fee based on Layer2 processing.</div>
                        </div>
                        <div class="box box2" @mouseover="currBox=1" :class="currBox==1?'curr':''">
                            <div class="box-icon"></div>
                            <div class="box-txt1">Lighting Transaction</div>
                            <div class="box-txt2">Real-time confirmation of transcations</div>
                        </div>
                        <div class="box box3" @mouseover="currBox=2" :class="currBox==2?'curr':''">
                            <div class="box-icon"></div>
                            <div class="box-txt1">TSS-based Consensus to Cross-layer</div>
                            <div class="box-txt2">Secured Asset transfer ensured by decentralized cross-layer process.
                            </div>
                        </div>
                        <div class="box box4" @mouseover="currBox=3" :class="currBox==3?'curr':''">
                            <div class="box-icon"></div>
                            <div class="box-txt1">Anonymity</div>
                            <div class="box-txt2">Anonymous transcation supported by ZKP.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box4">
            <div class="box-content">
                <div class="line1">Support</div>
                <div class="line2">
                    <span></span>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="box-content">
                <div class="line1">
                    <a href="https://discord.gg/z4NwH9Kq" class="a1" target="_blank"></a>
                    <a href="https://github.com/bitsat-wallet" class="a2" target="_blank"></a>
                    <a href="https://twitter.com/bitsat_office?s=21&t=LNwrgQ_lt0S9CLz9wjnNfA" class="a3" target="_blank"></a>
                    <!-- <a href="#" class="a4" target="_blank"></a> -->
                    <a href="https://medium.com/@bitsatoffice" class="a5" target="_blank"></a>
                </div>
                <div class="line2"></div>
                <div class="line3">©2023 bitSat All rights reserved.</div>
            </div>
        </div>
    </div>
    <script src="./js/vue.min.js" charset="utf-8"></script>
    <script src="./js/index.js" charset="utf-8"></script>
</body>

</html>